<template>
	<view class="container">
		<u-no-network @disconnected="disconnected" @connected="connected" @retry="retry"></u-no-network>
		<view class="u-content">
			<view class="u-content__circle">
				<u-icon name="checkbox-mark" color="#fff" size="30"></u-icon>
			</view>
			<text class="u-content__normal">车位审核中，请耐心等待</text>
		</view>
		<u-steps current="1" style="width: 360px;">
			<u-steps-item title="车位信息"></u-steps-item>
			<u-steps-item title="物业审核"></u-steps-item>
			<u-steps-item title="认证成功"></u-steps-item>
		</u-steps>
		<uni-section title="车位信息" type="line">
			<uni-card :is-shadow="false">
				<view class="flex-row wrapper-two">
					<view class="u-line-1 text-two">小区：</view>
					<view class="u-line-1 text-three">{{houseuserinfo.communityName}}</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-three">
					<view class="u-line-1 text-four">停车场：</view>
					<view class="u-line-1 text-five">{{houseuserinfo.communityName}}停车场</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-three">
					<view class="u-line-1 text-four">车位区域：</view>
					<view class="u-line-1 text-five">{{houseuserinfo.area}}</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-four">
					<view class="u-line-1 text-six">车位编号：</view>
					<view class="u-line-1 text-seven">{{houseuserinfo.serialNumber}}</view>
				</view>
				<view class="flex-row wrapper-five">
					<view class="u-line-1 text-six">车位状态：</view>
					<view class="u-line-1 text-seven">{{houseuserinfo.vehicelType}}</view>
				</view>
				<view class="flex-row wrapper-four">
					<view class="u-line-1 text-six">停车时间：</view>
					<view class="u-line-1 text-seven">{{houseuserinfo.accessTime | formatDate}}</view>
				</view>
				<view class="flex-row wrapper-four">
					<view class="u-line-1 text-six">停车时长(小时)：</view>
					<view class="u-line-1 text-seven">{{houseuserinfo.duration}}</view>
				</view>
			</uni-card>
		</uni-section>
		<uni-section title="住户信息" type="line">
			<uni-card :is-shadow="false">
				<view class="flex-row wrapper-two">
					<view class="u-line-1 text-two">住户姓名：</view>
					<view class="u-line-1 text-three">{{houseuserinfo.userName}}</view>
				</view>

				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-three">
					<view class="u-line-1 text-four">手机号码：</view>
					<view class="u-line-1 text-five">{{houseuserinfo.phone}}</view>
				</view>

				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>

			</uni-card>
		</uni-section>
		<uni-section title="车辆信息" type="line">
			<uni-card :is-shadow="false">
				<view class="flex-row wrapper-two">
					<view class="u-line-1 text-two">车牌号：</view>
					<view class="u-line-1 text-three">{{houseuserinfo.vehicleNumber}}</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-three">
					<view class="u-line-1 text-four">车辆品牌：</view>
					<view class="u-line-1 text-five">{{houseuserinfo.vehicleBrand}}</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-three">
					<view class="u-line-1 text-four">车辆型号：</view>
					<view class="u-line-1 text-five">{{houseuserinfo.vehicleModel}}</view>
				</view>
				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>
				<view class="flex-row wrapper-four">
					<view class="u-line-1 text-six">车辆颜色：</view>
					<view class="u-line-1 text-seven">{{houseuserinfo.vehicleColor}}</view>
				</view>

				<u-line class="line" margin="15rpx 15rpx 20rpx 12rpx"></u-line>

			</uni-card>
		</uni-section>
		<view class="flex-row wrapper-three">
			<!-- <u-button type="primary" text="修改" style="margin-right: 20rpx;"></u-button> -->
			<u-modal :show="show" @confirm="confirm" @cancel="cancel" :show-cancel-button="true" ref="uModal"
				:asyncClose="true" :title="title"></u-modal>
			<u-button @click="showModal" style="border-color: red;color:red;">删除</u-button>
			<!-- <u-button type="primary" :plain="true" text="删除" style="border-color: red;color:red;"></u-button> -->
		</view>
	</view>
</template>

<script>
	import request from '../../../request.js'
	let vinfo = localStorage.getItem("vinfo") ?
		JSON.parse(localStorage.getItem("vinfo")) :
		null;
	export default {
		data() {
			return {
				show: false,
				houseuserinfo: {},
				title: '确定删除吗?'
			};
		},
		filters: {
			formatDate: function(value) {
				var date = new Date();
				//date.setTime(value);
				var month = date.getMonth() + 1;
				var hours = date.getHours();
				if (hours < 10)
					hours = "0" + hours;
				var minutes = date.getMinutes();
				if (minutes < 10)
					minutes = "0" + minutes;
				var time = date.getFullYear() + "-" + month + "-" + date.getDate() +
					" " + hours + ":" + minutes;
				return time;
			}

		},
		methods: {
			cancel() {
				this.show = false;
			},
			showModal() {
				this.show = true;
			},
			confirm() {
				request({
					url: '/carshop/vehicle-number/deleteMyVehicle/'+vinfo.vehicleCarId,
					method: 'POST',
					success: (res) => {
						console.log(res)
						if (res.data.code == 20000) {
							setTimeout(() => {
								// 3秒后自动关闭
								this.show = false;
								}, 100)
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							})
							uni.navigateTo({

									url:'./mystall'
							})

						} else {
							uni.showToast({
								title: '删除失败',
								icon: 'error'
							})
						}
					}
				})

			}
		},
		onLoad() {
			//	console.log("------",JSON.stringify(aa))
			//let cc=JSON.stringify(aa.aa)
			// let cc=JSON.stringify(aa)
			console.log(vinfo)
			this.houseuserinfo = vinfo
			//console.log(this.houseuserinfo)


		}

	}
</script>

<style lang="scss">
	/** 全局样式-开始,建议放在公共css样式文件中,比如common.css 或app.vue文件 */

	html,
	body {
		margin: 0;
		width: 100%;
		height: 100%;
		font-size: 16px
	}

	view,
	text,
	image {
		position: relative;
		box-sizing: border-box;
		flex-shrink: 0;
	}

	.flex-col {
		display: flex;
		align-items: flex-start;
		flex-direction: column;
	}

	.flex-row {
		display: flex;
		align-items: flex-start;
	}

	.flex-col .flex-row {
		width: 100%
	}

	/** 全局样式-结束*/

	.homepage {
		height: 1334rpx;
		padding: 96rpx 0rpx 0rpx 89rpx;

		.wrapper {
			width: 423rpx;
			justify-content: space-between;
			margin-bottom: 17rpx;

			.button {
				width: 50rpx;
				height: 10rpx;
				background: #268497;
				color: #ffffff;
			}

			.text {
				width: 210rpx;
				margin-top: 4rpx;
				font-size: 36rpx;

			}

			.button-two {
				width: 100rpx;
				height: 28rpx;
				background: #268497;
				color: #ffffff;
			}
		}

		.line {
			width: 397rpx;
		}

		.wrapper-two {
			width: 396rpx;
			justify-content: space-between;
			margin: 0rpx 0rpx 10rpx 23rpx;

			.text-two {
				width: 100rpx;
			}

			.text-three {
				width: 283rpx;

			}
		}

		.wrapper-three {
			width: 396rpx;
			justify-content: space-between;
			margin: 0rpx 0rpx 10rpx 23rpx;

			.text-four {
				width: 50rpx;
			}

			.text-five {
				width: 283rpx;
			}
		}

		.wrapper-four {
			width: 396rpx;
			justify-content: space-between;
			margin-left: 23rpx;

			.text-six {
				width: 72rpx;
			}

			.text-seven {
				width: 283rpx;
			}
		}

		.wrapper-five {
			width: 396rpx;
			justify-content: space-between;
			margin-left: 23rpx;

			.text-six {
				width: 72rpx;
			}

			.text-seven {
				width: 283rpx;
			}
		}
	}

	.u-content {
		padding: 20rpx 60rpx 20rpx;
		@include flex(column);
		align-items: center;
		justify-content: center;

		&__circle {
			background-color: #006EFF;
			@include flex;
			border-radius: 100px;
			width: 60px;
			height: 60px;
			align-items: center;
			justify-content: center;
		}

		&__normal {
			font-size: 15px;
			color: #006EFF;
			margin-top: 15px;
		}
	}
</style>
